/**
* 实名认证
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, TextInput } from "react-native";
import { connect } from 'react-redux';
import { Colors, Dimens, ImageRes, CheckPhone } from '../../utils/Assets';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import ImagePicker from 'react-native-image-picker'
import { Actions } from 'react-native-router-flux';
import Toast from 'react-native-root-toast';
import { ProgressView } from '../custom/index'
class PersonalAuthTwoView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
        this.options = {
            title: '选择照片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选取',
            mediaType: 'photo',
            maxWidth: 750,
            maxHeight: 1000,
            quality: 0.5,
        }
        this.userInfo = props.userInfo
    }
    componentDidMount() {

    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    showImagePicker() {
        ImagePicker.showImagePicker(this.options, (response) => {
            if (response.didCancel) { } else if (response.error) { } else if (response.customButton) { } else {
                let source = { uri: Dimens.isIOS ? response.uri.replace('file://', '') : response.uri, isStatic: true }
                this.uploadImage(source.uri)
            }
        })
    }
    uploadImage(image) {
        this.setState({ loading: true })
        let filename = image.substr(image.lastIndexOf('/') + 1)
        let bank_image = { uri: image, type: 'multipart/form-data', name: filename };
        this.props.dispatch(create_service(Contract.POST_USER_OCR_BANK, { bank_image: bank_image, token: this.userInfo.token })).then((res) => {
            if (res) {
                this.setState({ bank_card: res.bank_card_number, loading: false })
            } else {
                this.setState({ loading: false })
            }
        })
    }
    auth() {
        if (!this.state.bank_card) {
            Toast.show('请输入银行卡号', { position: Toast.positions.CENTER })
            return
        }
        if (CheckPhone(this.mobile)) {
            Toast.show('请输入正确的手机号', { position: Toast.positions.CENTER })
            return
        }
        let params = {
            name: this.props.real_name,
            mobile: this.mobile,
            id_card: this.props.id_card,
            bank_card: this.state.bank_card,
            token: this.userInfo.token
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_REAL_NAME_AUTH, params)).then((res) => {
            if (res) {
                Actions.personalAuthThreeView()
            }
            this.setState({ loading: false })
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View style={{ backgroundColor: "#ffffff" }}>
                        <Image source={ImageRes.personal_auth_two} style={{ width: Dimens.DeviceWidth, height: Dimens.DeviceWidth * 0.27 }}></Image>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1, marginTop: 15 }}></View>
                        <View style={{ padding: 15, flexDirection: 'row', backgroundColor: "#ffffff", height: 50 }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>真实姓名</Text>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>{this.props.real_name}</Text>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                        <View style={{ padding: 15, flexDirection: 'row', backgroundColor: "#ffffff", height: 50 }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>身份证号</Text>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center' }}>{this.props.id_card}</Text>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                        <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', backgroundColor: "#ffffff" }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>储蓄卡</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.setState({ bank_card: text })
                                }}
                                keyboardType={'number-pad'}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入储蓄卡号'}
                                value={this.state.bank_card}
                            />
                            <TouchableOpacity style={{ justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                                this.showImagePicker()
                            }}>
                                <Image source={ImageRes.personal_camer} style={{ width: 28, height: 22, alignSelf: 'center' }}></Image>
                            </TouchableOpacity>
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                        <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 1 }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>手机号码</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.mobile = text
                                }}
                                keyboardType={'number-pad'}
                                maxLength={11}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入银行卡预留手机号码'}
                            />
                        </View>
                        <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                    </View>
                    <TouchableOpacity style={{ marginVertical: 30, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                        this.auth()
                    }}>
                        <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>立即认证</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(PersonalAuthTwoView);
module.exports.PersonalAuthTwoView = ExportView
